import React, { memo, useState } from "react"

import { filterData } from "@/config"
import { FilterWrapper } from "./style"
import classNames from "classnames"

const MoreFilter = memo(() => {
  const [selList, setSelList] = useState([])
  const itemClickHandle = (item) => {
    const list = [...selList]
    if(list.includes(item)) {
      const index = list.findIndex(filterItem => filterItem == item)
      list.splice(index, 1)
    } else {
      list.push(item)
    }
    setSelList(list)
  }
  return (
    <FilterWrapper>
      {
        filterData.map((item, index) => {
          return (
            <div 
              className={classNames("item",{active: selList.includes(item)})} 
              key={index} 
              onClick={e => itemClickHandle(item)}
            >
              {item}
              {selList.includes(item) && <span className="icon">√</span>}
            </div>
          )
        })
      }
    </FilterWrapper>
  )
})

export default MoreFilter
